<!doctype html>
<head>
	<title>Sphere Example</title>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
	<script src="../dist/threebox.js" type="text/javascript"></script>
	<link href="../dist/threebox.css" rel="stylesheet" type="text/css" />
	<script src="config.js"></script>
	<style>
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
		}

		#map {
			width: 100%;
			height: 100%;
		}

	</style>
</head>
<body>
	<div id='map' class='map'></div>

	<script type="module">

		if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
		
		mapboxgl.accessToken = config.accessToken;

		//starting location for both map and eventual sphere
		var origin = [-122.4340, 37.7353, 1];

		var map = new mapboxgl.Map({
			container: 'map',
			style: 'mapbox://styles/mapbox/light-v9',
			center: origin,
			zoom: 17,
			pitch: 60,
			antialias:true
		});

		let stats;
		import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
		function animate() {
			requestAnimationFrame(animate);
			stats.update();
		}

		map.on('style.load', function() {
			// stats
			stats = new Stats();
			map.getContainer().appendChild(stats.dom);
			animate();

			map.addLayer({
				id: 'custom_layer',
				type: 'custom',
				renderingMode: '3d',
				onAdd: function(map, mbxContext){

					// instantiate threebox
					window.tb = new Threebox(
						map, 
						mbxContext,
						{
							defaultLights: true,
							enableSelectingObjects: true
						}
					);

					//instantiate a red sphere and position it at the origin lnglat
					var sphere = tb.sphere({color: 'red', material: 'MeshToonMaterial'})
						.setCoords(origin);
					sphere.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
					sphere.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
					// add sphere to the scene
					tb.add(sphere);

				},
				
				render: function (gl, matrix) {
					tb.update();
				}
			})
		});

		//actions to execute onObjectMouseOver
		function onObjectMouseOver(e) {
			console.log("ObjectMouseOver: " + e.detail.name);
		}

		//actions to execute onObjectMouseOut
		function onObjectMouseOut(e) {
			console.log("ObjectMouseOut: " + e.detail.name);
		}

	</script>
</body>